import React from 'react';
import {InputItem, List, NavBar, Icon, Grid} from 'antd-mobile';
import {connect} from 'react-redux';
import {getMsgList, sendMsg, recvMsg, readMsg} from '../../redux/chat.redux';
import io from 'socket.io-client';
import { getChatId } from '../../util';
const socket = io('ws://localhost:9093');

@connect(
	state => state,
	{getMsgList, sendMsg, recvMsg, readMsg}
)
export default class Chat extends React.Component{
	constructor(props) {
		super(props);
		this.state = {
			text: '',
			msg: [],
		}
	}
	componentDidMount() {		
		if (!this.props.chat.chatmsg.length) {
			// 获取所有消息的列表
			this.props.getMsgList();
			// 开始监听当前页有没有消息传入
			this.props.recvMsg();
		}
	}

	// 退出聊天页面时调用已读消息接口
	componentWillUnmount() {
		const to = this.props.match.params.user;
		this.props.readMsg(to);
	}

	// 修复antd-mobile 的跑马灯bug
	fixCarousel(){
		setTimeout(function(){
			window.dispatchEvent(new Event('resize'))
		},0)
	}

	handleSubmit() {
		const from = this.props.user._id;
		const to = this.props.match.params.user;
		const msg = this.state.text;
		this.props.sendMsg({from, to, msg});
		this.setState({
			text: '',
			showEmoji: false,
		});
	}
	render() {
		const emoji = '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😜 😝 😛 🤑 🤗 🤓 😎 😏 😒 😞 😔 😟 😕 🙁 😣 😖 😫 😩 😤 😠 😡 😶 😐 😑 😯 😦 😧 😮 😲 😵 😳 😱 😨 😰 😢 😥 😭 😓 😪 😴 🙄 🤔 😬 🤐 😷 🤒 🤕 😈 👿 👹 👺 💩 👻 💀 ☠️ 👽 👾 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾 👐 🙌 👏 🙏 👍 👎 👊 ✊ 🤘 👌 👈 👉 👆 👇 ✋  🖐 🖖 👋  💪 🖕 ✍️  💅 🖖 💄 💋 👄 👅 👂 👃 👁 👀 '
										.split(' ')
										.filter(v=>v)
										.map(v=>({text:v}));


		const userid = this.props.match.params.user;
		const Item = List.Item;
		const users = this.props.chat.users;
		if (!users[userid]) {
			return null;
		}

		// 获取一组消息通信的唯一id
		const chatid = getChatId(userid, this.props.user._id);
		const chatmsgs = this.props.chat.chatmsg.filter(v => v.chatid === chatid);

		return(
			<div id="chat-page">
				<NavBar
					mode="dark"
					icon={<Icon type="left" />}
					onLeftClick={() => {
						this.props.history.goBack();
					}}
				>
					{ users[userid].name }
				</NavBar>
				{chatmsgs.map(v => {
					const avatar = require(`../img/${users[v.from].avatar}.png`);
					return v.from === userid ? (
						<List key={v._id}>
							<Item
								thumb={avatar}
							>{v.content}</Item>
						</List>
					) : (
						<List key={v._id}>
							<Item
								extra={<img alt="" src={avatar} />}
								className="chat-me"
							>{v.content}</Item>
						</List>
					)
				})}			
				<div className="stick-footer">
					<List>
						<InputItem
							placeholder="请输入"
							value={this.state.text}
							onChange={(v) => {this.setState({text: v})}}
							extra={
								<div>
									<span
										style={{ marginRight:15 }}
										onClick={()=>{
											this.setState({
												showEmoji: !this.state.showEmoji
											})
											this.fixCarousel()
										}}
									>😃</span>
									<span onClick={()=>{this.handleSubmit()}}>发送</span>
								</div>}
						></InputItem>
					</List>
					{this.state.showEmoji ? <Grid 
						data={emoji}
						columnNum={9}
						carouselMaxRow={4}
						isCarousel={true}
						onClick={el => {
							this.setState({
								text:this.state.text + el.text,
							});						
						}}
					/> : null}
				</div>
			</div>
		)
	}
}